<template>
  <div>
    <el-row>
      <el-form :inline="true" :model="seach" class="demo-form-inline">
        <el-form-item label="员工类型">
          <el-select v-model="seach.state" placeholder=" -- " clearable>
            <el-option label="员工" :value="0"></el-option>
            <el-option label="部长" :value="1"></el-option>
            <el-option label="经理" :value="2"></el-option>
            <el-option label="全部" :value="100"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loaddate">查询</el-button>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="seach.name" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadDataByName">查询</el-button>
        </el-form-item>
        <el-form-item label="员工号">
          <el-input v-model="seach.employeeNo" placeholder="请输入员工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadDataByEmployeeNo">查询</el-button>
        </el-form-item>
        <el-button type="danger" @click="NewEmployee">
          新增员工
        </el-button>
        <el-button type="success" @click="exportEmployeeList">
          <i class="el-icon-download"></i> 导出名单
        </el-button>
      </el-form>
    </el-row>

    <el-table
        :data="pages"
        border
        style="width: 100%"
    >
      <el-table-column
          prop="employeeId"
          label="员工ID"
      >
      </el-table-column>
      <el-table-column
          prop="employeeNo"
          label="工号">
      </el-table-column>

      <el-table-column
          prop="employeeName"
          label="姓名"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template #default="scope">
          <el-button @click="goToEmployeeInfo(scope.row.employeeId)" type="text" size="small">查看详情</el-button>
          <el-button @click="deleteEmployee(scope.row.employeeId)" type="text" size="small">删除员工</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>

</template>

<script src = "../../script/employee/AllEmployee.js"></script>
<style scoped src="../../assets/style/AllEmployee.css"></style>
